<template>
  <div>
    统计分析页面

    <div id="main" style="text-align: center; width: 100%; height: 600px"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      //异步加载数据
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
    //生成统计数据：
        /*
            srb:
                1、日活
                    每天登录的用户的总数量、所用总登录次数
                        wx登录、手机号登录时 将会员id存到redis中的set集合中
                2、日增会员
                    每天新注册会员
                        根据创建时间查询会员表中统计日期的数据
                3、发布的标的数量

                4、投资相关数据
                    投资次数
                    投资金额
                    充值金额
                    提现金额

                5、定时任务
                    每天凌晨3点，查询前一天的各个统计数据 
                    存到统计分析表中
        */
      // prettier-ignore
      //展示在每个柱子上的文本内容：
      let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
      // prettier-ignore
      //每个柱子的值
      let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
      //y轴最大值
      let yMax = 500;
      let dataShadow = [];
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }
      option = {
        title: {
          text: "尚融宝统计数据",
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            color: "#fff",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#999",
          },
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        series: [
          {
            type: "bar",
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
              },
            },
            data: data,
          },
        ],
      };
      // Enable data zoom when user click bar.
      const zoomSize = 6;
      myChart.on("click", function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
          type: "dataZoom",
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[
              Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
            ],
        });
      });

      option && myChart.setOption(option);
    },
  },
};
</script>
